<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <v-app-bar app dark flat th:prominent="${prominent}" class="header-divider" th:fragment="appBar">
      <v-toolbar-title th:style="${prominent}? 'padding-bottom: 16px;' : null">
        <a th:href="@{/}">
          <img src="images/logo.png" class="logo"/>
        </a>
        <span class="app-name">Code</span>
      </v-toolbar-title>

      <!--/* 标题占位符 */-->
      <div th:replace="${titleFrag} ?: ~{}"/>

      <v-spacer></v-spacer>

      <v-tooltip bottom>
        <template v-slot:activator="{on, attrs}">
          <v-btn icon v-bind="attrs" v-on="on" @click="clearCache">
            <v-icon>mdi-flash</v-icon>
          </v-btn>
        </template>
        <span v-text="$t('清除缓存')"></span>
      </v-tooltip>

      <v-menu dark open-on-hover bottom offset-y :close-delay="200">
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon v-bind="attrs" v-on="on">
            <v-icon>mdi-translate</v-icon>
            <v-icon>mdi-chevron-down</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item-group mandatory v-model="lang" @change="switchLang">
            <v-list-item v-for="locale in locales" :value="locale.lang">
              <v-list-item-content>
                <v-list-item-title>{{locale.text}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-menu>
      <v-btn icon @click="toggleFullScreen">
        <v-icon>{{fullscreenIcon}}</v-icon>
      </v-btn>
    </v-app-bar>
  </body>
</html>